<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="initMethod"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="initMethod">搜索</el-button>
    </div>
    <!--表单组件-->
    <eForm ref="form"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="tableData.content" stripe border size="small" style="width: 100%;">
      <el-table-column prop="id" label="订单ID"/>
      <el-table-column prop="shopid" label="商户ID" width="80px"/>
      <el-table-column prop="customerid" label="用户openID" show-overflow-tooltip/>
      <el-table-column prop="devicesn" label="设备SN" show-overflow-tooltip/>
      <el-table-column prop="amount" label="金额" width="50px" align="center"/>
      <el-table-column prop="paytype" label="支付方式" width="100px" align="center"/>
      <el-table-column prop="time" label="使用时间" width="80px" align="center"/>
      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.orderstatus===0" style="color: darkred">已取消</span>
          <span v-else-if="scope.row.orderstatus===1" style="color: darkgreen">进行中</span>
          <span v-else-if="scope.row.orderstatus===2" style="color: darkblue">已完成</span>
          <span v-else-if="scope.row.orderstatus===3" style="color: rebeccapurple">提前结束</span>
          <span v-else-if="scope.row.orderstatus===5" style="color: darkorange">待支付</span>
          <span v-else-if="scope.row.orderstatus===6" style="color: darkmagenta">退款超时</span>
        </template>
      </el-table-column>
      <el-table-column prop="passwd" label="密码" show-overflow-tooltip/>
      <el-table-column prop="created" label="创建时间" show-overflow-tooltip/>
      <el-table-column prop="end" label="结束时间" show-overflow-tooltip/>
      <el-table-column v-if="checkPermission(['admin','identity:edit','identity:del'])" label="操作" fixed="right" width="220px" align="center">
        <template slot-scope="scope">
          <el-tooltip v-permission="['admin','identity:edit']" slot="reference" content="商铺详情" placement="top">
            <el-button type="warning" size="mini" icon="el-icon-office-building" @click="shopDetail(scope.row.shopid)"/>
          </el-tooltip>
          <el-tooltip v-permission="['admin','identity:edit']" slot="reference" content="所有设备" placement="top">
            <el-button type="success" size="mini" icon="el-icon-cpu" @click="deviceDetail(scope.row.devicesn)"/>
          </el-tooltip>
          <el-popover v-permission="['admin','identity:del']" v-show="scope.row.orderstatus===1 || scope.row.orderstatus===2 || scope.row.orderstatus===6" :ref="scope.row.id" placement="top" width="180">
            <p>确定结束订单并退款吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subRefund(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" size="mini">结束</el-button>
          </el-popover>
          <el-button slot="reference" type="text" size="mini" @click="detail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <el-pagination
        :current-page="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.size"
        :total="tableData.totalElements"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import eForm from './detail'
import { postRequest, deleteRequest, getRequest } from '@/api/order'
export default {
  components: { eForm },
  data() {
    return {
      loading: false,
      delLoading: false,
      query: {
        value: '',
        type: '',
        page: 1,
        size: 10
      },
      tableData: {
        totalElements: 0,
        data: []
      },
      queryTypeOptions: [
        { key: 'id', display_name: '订单ID' },
        { key: 'shopid', display_name: '商户ID' },
        { key: 'devicesn', display_name: '设备SN' },
        { key: 'customerid', display_name: '用户openid' },
        { key: 'agentId', display_name: '代理ID' }

      ]
    }
  },
  created() {
    if (Object.keys(this.$route.query).length !== 0) {
      this.query.value = this.$route.query.value
      this.query.type = this.$route.query.type
    }
    this.$nextTick(() => {
      this.initMethod()
    })
  },
  methods: {
    checkPermission,
    initMethod() {
      postRequest('/pc/order', this.query).then(resp => {
        console.log(resp)
        this.tableData = resp.entity
      })
    },
    subRefund(id) {
      deleteRequest('/pc/order/', id).then(resp => {
        console.log(resp)
        this.initMethod()
        this.$refs[id].doClose()
      })
    },
    handleSizeChange(val) {
      this.query.size = val
      this.initMethod()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.initMethod()
    },
    detail(val) {
      const _this = this.$refs.form
      getRequest('/pc/order/', val).then(resp => {
        console.log(resp.data)
        _this.form = resp.data
        _this.dialog = true
      })
    },
    shopDetail(shopId) {
      this.$router.push({ path: 'shop', query: { value: shopId, type: 'shopId' }})
    },
    deviceDetail(id) {
      this.$router.push({ path: 'device', query: { value: id, type: 'shopId' }})
    }
  }
}
</script>

<style scoped>
  .el-button + .el-button {
    margin-left: 0;
  }
</style>
